<template>
  <section class="hero">
    <div class="hero-text">
      <h1>致力于成为教育科技融合发展的领先企业</h1>
      <button @click="goToDetails">了解详情</button>
    </div>
  </section>
</template>

<script>
export default {
  name: "HeroSection",
  methods: {
    goToDetails() {
      // 导航到详情页的逻辑
    }
  }
};
</script>

<style scoped>
.hero {
  position: relative;
  /* height: 100vh; */
  width:100%;
  background: url('@/assets/education-website/hero-image.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-text {
  text-align: center;
  color: white;
  /* max-width: 600px; */
}

.hero h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.hero button {
  padding: 10px 20px;
  background-color: #1e4e8e;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.hero button:hover {
  background-color: #155b8a;
}
</style>
